<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文件共享服务器</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 20px;
        max-width: 1200px;
        margin: 0 auto;
      }
      h1 {
        color: #333;
      }
      .upload-form {
        background: #f8f9fa;
        padding: 20px;
        margin-bottom: 20px;
        border-radius: 5px;
      }
      .upload-form input[type="file"] {
        display: block;
        margin-bottom: 10px;
      }
      .upload-form button {
        background: #4caf50;
        color: white;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        border-radius: 5px;
      }
      .upload-form button:hover {
        background: #45a049;
      }
      .directory-form {
        margin-bottom: 20px;
      }
      .directory-form input {
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
      }
      .directory-form button {
        background: #2196f3;
        color: white;
        border: none;
        padding: 9px 15px;
        cursor: pointer;
        border-radius: 4px;
      }
      .directory-form button:hover {
        background: #0b7dda;
      }
      table {
        width: 100%;
        border-collapse: collapse;
      }
      table,
      th,
      td {
        border: 1px solid #ddd;
        padding: 8px;
      }
      th {
        background-color: #f2f2f2;
        text-align: left;
      }
      tr:hover {
        background-color: #f5f5f5;
      }
      .download-link {
        color: #0066cc;
        text-decoration: none;
      }
      .download-link:hover {
        text-decoration: underline;
      }
      .file-icon {
        width: 24px;
        height: 24px;
        margin-right: 8px;
        vertical-align: middle;
      }
      .size-column {
        width: 120px;
      }
      .date-column {
        width: 180px;
      }
      .actions-column {
        width: 80px;
      }
      .error {
        color: #ff0000;
      }
    </style>
  </head>
  <body>
    <h1>文件共享服务器</h1>

    <div class="upload-form">
      <h3>上传文件</h3>
      <form action="/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="file" required />
        <button type="submit">上传</button>
      </form>
    </div>

    <!-- <div class="directory-form">
      <h3>创建目录</h3>
      <form action="/create-directory" method="post">
        <input type="text" name="dirName" placeholder="目录名称" required />
        <button type="submit">创建</button>
      </form>
    </div> -->

    <h3>文件列表</h3>
    <table>
      <thead>
        <tr>
          <th>名称</th>
          <th class="size-column">大小</th>
          <th class="date-column">修改日期</th>
          <th class="actions-column">操作</th>
        </tr>
      </thead>
      <tbody>
        <% files.forEach(file => { %>
        <tr>
          <td>
            <% if (file.isDirectory) { %>
            <img
              src=""
              alt="目录图标"
              class="file-icon"
            />
            <strong><%= file.name %></strong>
            <% } else { %>
            <img
              src=""
              alt="文件图标"
              class="file-icon"
            />
            <a
              href="/download/<%= encodeURIComponent(file.name) %>"
              class="download-link"
              ><%= file.name %></a
            >
            <% } %>
          </td>
          <td><%= file.size %></td>
          <td><%= file.mtime %></td>
          <td>
            <% if (!file.isDirectory) { %>
            <a href="/download/<%= encodeURIComponent(file.name) %>">下载</a>
            <% } %>
          </td>
        </tr>
        <% }); %>
      </tbody>
    </table>
  </body>
</html>
